<div class="content">
    <div id="example_title">
        <h1>Transitions</h1>
        If you have 2 DIVs with absolute positioning, you can transition them nicely.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<style>
.container {
    width: 420px;
    height: 230px;
    padding: 10px;
    overflow: hidden;
}
.box {
    background-color: #fafafa;
    padding: 4px;
    position: absolute;
    width: 400px;
    height: 200px;
    border: 1px solid silver;
}
</style>
<div class="container">
    <div id="box1" class="box">
        This this first div. It just has some text as example. This box does not have any other elements then some text.
        This this first div. It just has some text as example. This box does not have any other elements then some text.
        This this first div. It just has some text as example. This box does not have any other elements then some text.
        This this first div. It just has some text as example. This box does not have any other elements then some text.
    </div>
    <div id="box2" class="box" style="display: none; background-color: #E0FFE1;">
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">1</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">2</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">3</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">4</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">5</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">6</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">7</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">8</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">9</div>
        <div style="float: left; width: 100px; height: 30px; border: 1px solid silver; margin: 3px;">10</div>
    </div>
</div>
<br><br>
<select id="trans" style="height: 28px;" class="w2ui-input">
    <option value="flip-left">flip-left</option>
    <option value="flip-right">flip-right</option>
    <option value="flip-up">flip-up</option>
    <option value="flip-down">flip-down</option>
    <option value="slide-left">slide-left</option>
    <option value="slide-right">slide-right</option>
    <option value="slide-up">slide-up</option>
    <option value="slide-down">slide-down</option>
    <option value="pop-in">pop-in</option>
    <option value="pop-out">pop-out</option>
</select>
<button class="w2ui-btn" id="btn-go">Go</button>

<!--CODE-->
<script type="module">
import { w2utils, query } from '__W2UI_PATH__'

let current = 'box1'
query('#btn-go').on('click', () => {
    let box1 = query('#box1').get(0)
    let box2 = query('#box2').get(0)
    let trans = query('#trans').val()
    if (current == 'box1') {
         current = 'box2'
         w2utils.transition(box1, box2, trans)
         return
        }
    if (current == 'box2') {
        current = 'box1'
        w2utils.transition(box2, box1, trans)
        return
    }
})
</script>
